<template>
    <div class="dataAdd">
        <!-- 级联选择器 -->
        <!-- {{form}} -->
        <el-cascader-panel v-model="form.pca" :options="pca" :props='{value:"name",label:"name"}' @change='choice'></el-cascader-panel>
        
        <div style='position:relative'>
            <!-- 表单 -->
            <div style="width:50%;margin-top:10px;display:inline-block;">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="确诊">
                        <el-input v-model="form.confirmed"></el-input>
                    </el-form-item>
                    <el-form-item label="疑似">
                        <el-input v-model="form.suspected"></el-input>
                    </el-form-item>
                    <el-form-item label="死亡">
                        <el-input v-model="form.dead"></el-input>
                    </el-form-item>
                    <el-form-item label="治愈">
                        <el-input v-model="form.cure"></el-input>
                    </el-form-item>
                    <el-form-item label="重症">
                        <el-input v-model="form.severe"></el-input>
                    </el-form-item>
                    <el-form-item label="境外输入">
                        <el-input v-model="form.outside"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="toAdd">提交</el-button>
                    </el-form-item>

                </el-form>
            </div>

            <!-- 提示 -->
            <div style="display:inline-block;position:absolute;top:3%;margin-left:10px;color:red;">
                <div>温馨提示：</div>
                <div>1. 先录入城市</div>
                <div>2. 再填写数据</div>
            </div>
        </div>
    </div>
</template>
<script>
// 引入省市区的文件
import pca from '@/assets/pca.json'
// 引入qs
import qs from 'qs'
import axios from '@/http/axios'
import moment from 'moment'

export default {
    data(){
        return {
            pca,
            form:{
                country:'中国'
            }
        }
    },
    methods:{
        // 数据录入：每一个城市每一天只允许保存一次数据，当天之后所有的提交都是修改操作

        // 级联选择器选中后出发的事件
        choice(val){
            // 获取当前时间
            var date = moment(new Date()).format('YYYY-MM-DD')
            var obj = {
                page:1,
                pageSize:10,
                province:val[0],
                city:val[1],
                area:val[2],
                inputTime:date
            }
            axios({
                url:"http://121.199.29.84:8001/epidemic/pageQuery",
                method:"get",
                params:obj
            }).then((res)=>{
                // 将分页查询的结果赋值给保存接口的参数，也就是把id赋值过去
                if(res.data.data.total != 0){
                    this.form = res.data.data.list[0]
                }
            })
        },
        // 提交事件
        toAdd(){
            // 克隆数据
            var data = Object.assign({},this.form)
            if(!this.form.id){
                data.province = data.pca[0]
                data.city = data.pca[1]
                data.area = data.pca[2]
            }
            // 删除数据
            delete data.pca
            
            axios({
                url:'http://121.199.29.84:8001/epidemic/saveOrUpdate',
                method:'post',
                data:qs.stringify(data),
                // contentType:'application/x-www-form-urlencoded'
                headers:{
                    'content-type':'application/x-www-form-urlencoded'
                }
            }).then((res)=>{
                // 1. 提示用用户更新成功
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
                // 2. 跳转到数据列表页面
                this.$router.push({
                    path:'/data/datalist'
                })
            })
        }
    }
}
</script>